<template>
  <el-table v-bind="mergeProps($attrs, props)" highlight-current-row v-loading="loading" :element-loading-text="loadingText" :element-loading-background="loadingBackground" :empty-text="emptyText">
    <el-table-column v-for="(column, index) in columns" :key="index" v-bind="column">
      <template v-if="column.slot" #default="{ $index, row }">
        <slot :name="column.slot" :$index :row></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
defineOptions({ name: 'EpTable' })
import { mergeProps } from 'vue'
import type { TableProps as ElTableProps } from 'element-plus'

const props = defineProps({
  /** 表数据 */
  data: { type: Array, required: true },
  /** 表格列的配置描述 具体项见 https://element-plus.org/zh-CN/component/table.html#table-column-api */
  columns: { type: Array as PropType<TableColumnProp[]>, required: true },
  /** 表格数据的请求加载态 */
  loading: { type: Boolean, default: false },
  /** 加载提示文本 */
  loadingText: { type: String, default: '正在加载...' },
  /** 加载模态框背景色 */
  loadingBackground: { type: String, default: 'rgba(122, 122, 122, 0.8)' },
  /** 空数据时显示的文本内容， 也可以通过 #empty 设置 */
  emptyText: { type: String, default: '暂时没有数据哟🌻' },
})
</script>

<style lang="scss" scoped></style>
